<template>
	<div class="login">
		<h1>登录页</h1>
		<Form :model="loginRef" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
			<Alert :closable="true" v-if="errMsg" :message="errMsg" type="error" @close="onClose" />
			<FormItem label="用户名" v-bind="validateInfos.username">
				<Input v-model:value="loginRef.username"></Input>
			</FormItem>
			<FormItem label="密码" v-bind="validateInfos.password">
				<Input type="password" v-model:value="loginRef.password"></Input>
			</FormItem>
		</Form>
		<a-button type="primary" size="large" @click="submit">登录</a-button>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Form, Alert, FormItem, Input } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user';
const useForm = Form.useForm;

export default defineComponent({
	name: 'Login',
	components: { Alert, Form, FormItem, Input },
	setup() {
		const userStore = useUserStore();

		const loginRef = reactive({
			username: '',
			password: '',
		});
		const rules = reactive({
			username: [
				{
					required: true,
					message: '请输入用户名',
				},
			],
			password: [
				{
					required: true,
					message: '请输入密码',
				},
			],
		});
		const errMsg = ref('');

		const { validate, validateInfos } = useForm(loginRef, rules);

		const submit = () => {
			validate().then(data => {
				userStore.login({ ...data, mode: 'none' }).then(
					() => {},
					err => {
						errMsg.value = err;
					},
				);
			});
			// .catch(err => {
			// });
		};

		const onClose = () => {
			errMsg.value = '';
		};

		return {
			loginRef,
			validateInfos,
			errMsg,
			submit,
			onClose,
		};
	},
});
</script>
<style lang="less" scoped>
.login {
	display: flex;
	width: 100vw;
	height: 100vh;
	padding-top: 240px;
	flex-direction: column;
	align-items: center;
}
</style>
